<template>
  <div class="uploadimg">
    <div class="addimg" :style="{height:height+'px'}" @click="cropperBox" v-if="!pic">
      <i class="el-icon-plus"></i>
      <p>点击上传</p>
    </div>
    <div>
      <div class="checkimgBody">
<!--        <img :src="httpIp+pic" alt="">-->
<!--        medium / small / mini-->
        <viewerModle type="1" :imgSrc="pic" widthNumber="small"></viewerModle>
<!--        <div class="checkimg-icon" @click="priviwe">-->
<!--          <div class="checkimg-icon-box">-->
<!--            <i class="el-icon-view"></i>-->
<!--          </div>-->
<!--        </div>-->
      </div>
      <p class="checkImgp mt-5" @click="cropperBox" v-if="picSrc">重新选择图片</p>
    </div>
<!--    <p class="infodescribe mt-5" v-if="page!=='startUp'">最佳尺寸为{{sizeBox[page].list[0]}}X{{sizeBox[page].list[1]}}像素，大小不超过2M，支持jpg、png格式</p>-->
    <corpper :visible.sync="corppervisible"
             v-if="corppervisible" @imgAddBack="imgAddBack" :imgSize="sizeBox[page].sizeType"></corpper>
    <viewImgDialog :privaImgObj="imgsrcCheck" :visible.sync="dialogImgVisible"></viewImgDialog>
  </div>
</template>
<script>
  import api from '@/utils/api.js'
  import corpper from '@/components/dialog/corpper.vue'
import viewImgDialog from '@/components/dialog/viewImgDialog.vue'

export default {
    name: 'uploadImg',
    props: ['imgNumber', 'page', 'picSrc'],
    components: {
      corpper,
      viewImgDialog
    },
    watch: {
      picSrc (val) {
        this.pic = this.picSrc
      }
    },
    data () {
      return {
        imgSize: 5,
        dialogImgVisible: false,
        corppervisible: false,
        imgsrcCheck: null,
        sizeBox: {
          'studentPic': {list: [295, 413], sizeType: 0}, // 学生头像一寸 295*413
          'studentParentsPic': {list: [295, 413], sizeType: 0}, // 学生家长头像一寸 295*413
          'teachingPic': {list: [200, 200], sizeType: 1},
          'foodPic': {list: [200, 200], sizeType: 1} // 餐品添加
        },
        height: 0,
        pic: '',
      }
  },
    created () {
      // 机端比例尺寸内容，定义高度
      this.pic = this.picSrc
      if (this.sizeBox[this.page].list[0] > this.sizeBox[this.page].list[1]) {
        this.height = (160 / this.sizeBox[this.page].list[1]) * this.sizeBox[this.page].list[0]
      } else if (this.sizeBox[this.page].list[0] < this.sizeBox[this.page].list[1]) {
        this.height = (160 / this.sizeBox[this.page].list[0]) * this.sizeBox[this.page].list[1]
      } else {
        this.height = 160
      }
    },
    methods: {
      cropperBox () {
        this.corppervisible = true
      },
      imgAddBack (option) {
        this.pic = option
        this.$emit('getChildValue', option)
      },
      priviwe () {
        this.imgsrcCheck = this.pic
        this.dialogImgVisible = true
      }
    }
  }
</script>
<style>
  .addimg {
    width: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #eee;
    border-radius: 4px;
    border: 1px #ddd dashed;
    cursor: pointer;
  }

  .addimg p {
    font-size: 12px;
    text-align: center;
    padding: 10 0;
  }

  .checkimgBody img {
    display: block;
  }
  .checkImgp{
    color:#578bcf ;
    font-size:12px;
    cursor: pointer;
    width: 100px;
  }
  .checkimgBody{
    position: relative;
  }
  .checkimgBody:hover .checkimg-icon{
    display: block;
  }
  .checkimg-icon{
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.3);
    cursor: pointer;
  }
  .checkimg-icon i{
    color:#fff
  }
  .checkimg-icon-box{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
</style>
<style scoped>
.viewerImg{
width: 200px;
}
</style>

